<template>
	<view class="padding">
		<u--form labelPosition="right" :model="data" ref="uForm" :labelWidth="120">
			<u-form-item label="省、市、区/县" prop="data.area" borderBottom required @click="areaShow=true">
				<u--input readonly v-model="area" border="none" placeholder="请选择省市区/县" @click="areaShow=true"
					suffixIcon="arrow-right"></u--input>
			</u-form-item>
			<u-form-item label="姓名" prop="data.username" borderBottom required>
				<u--input v-model="data.username" border="none" placeholder="请填写姓名"></u--input>
			</u-form-item>
			<u-form-item label="手机号" prop="data.mobile" borderBottom required>
				<u--input v-model="data.mobile" border="none" placeholder="请填写手机号"></u--input>
			</u-form-item>
			<u-form-item label="学校名称" prop="data.school" borderBottom required>
				<u--input v-model="data.school" border="none" placeholder="请填写学校名称"></u--input>
			</u-form-item>
			<u-picker ref="uPicker" :show="areaShow" :columns="areaData" closeOnClickOverlay keyName="name"
				@confirm="areaConfirm" @change="changeHandler" @cancel="areaShow=false"
				@close="areaShow=false">
			</u-picker>
		</u--form>
		<view>
			<button class="bg-red margin-tb text-df" style="width:90%;" @click="tijiao">提交信息</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					prov: '',
					city: '',
					county:'',
					username:'',
					school:'',
					mobile:''
				},
				area:"",
				areaShow:false,
				areaData: [
					[],
					[],
					[]
				],
			}
		},
		onLoad(op) {
			this.getProv()
		},
		methods: {
			tijiao() {
				this.AXIOS.Request(true, 'POST', {
					url: "/api/app/fxapply",
					data: this.data
				}, (res) => {
					var rst = res.data;
					if (rst.code == 100) {
						uni.showModal({
							title: '提示',
							content: rst.msg,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack()
								}
							}
						});
					} else {
						uni.showToast({
							title: rst.msg,
							icon: "none"
						})
					}
				})
			},
			getProv() {
				this.AXIOS.Request(true, 'POST', {
					url: "/api/app/teqvd0wd"
				}, (res) => {
					this.$set(this.areaData, 0, res.data);
					this.getCity(res.data[0].id)
				})
			},
			getCity(pid) {
				this.AXIOS.Request(true, 'POST', {
					url: "/api/app/y7thadrx",
					data: {
						pid: pid
					}
				}, (res) => {
					this.$set(this.areaData, 1, res.data);
					this.$refs.uPicker.setColumnValues(1, res.data[0].id)
					this.getCounty(res.data[0].id)
				})
			},
			getCounty(pid) {
				this.AXIOS.Request(true, 'POST', {
					url: "/api/app/y7thadrx",
					data: {
						pid: pid
					}
				}, (res) => {
					this.$set(this.areaData, 2, res.data);
					this.$refs.uPicker.setColumnValues(1, res.data[0].id)
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					this.getCity(e.value[0].id)
				}
				if (columnIndex === 1) {
					this.getCounty(e.value[1].id)
				}
			},
			areaConfirm(e) {
				this.data.prov=e.value[0].name
				this.data.city=e.value[1].name
				this.data.county=e.value[2].name
				this.area=this.data.prov+" "+this.data.city+" "+this.data.county
				this.areaShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}
</style>